<template>
  <div v-if="userInfo">
    <el-form :inline="true" :model="form" size="large" style="max-width: 650px">
      <el-form-item label="昵称" prop="name">
        <el-input placeholder="请输入新昵称" v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="gender">
        <el-radio-group v-model="form.gender">
          <el-radio value="男" border>男</el-radio>
          <el-radio value="女" border>女</el-radio>
          <el-radio value="保密" border>保密</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="生日" prop="birthday">
        <el-date-picker v-model="form.birthday" type="date" placeholder="选择日期" format="YYYY/MM/DD"
          value-format="YYYY-MM-DD"></el-date-picker>
      </el-form-item>
      <el-form-item label="地区" prop="region">
        <el-cascader v-model="form.region" :options="regionOptions" placeholder="请选择"></el-cascader>
      </el-form-item>
      <el-form-item>
        <div class="div1">
          <el-button type="primary" @click="onSubmit">提交</el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>

  <el-empty  v-else description="请先登录哦">
    <el-button type="primary" @click="goTo('/user/login')">去登录/注册</el-button>
  </el-empty>
</template>

<script lang="ts" setup>
import { reactive } from 'vue';
import { ElForm } from 'element-plus';
import { useUserStore } from '@/stores/userStore';

import axios from 'axios';
import { useGoTo } from '@/hooks/useGoTo';
const { goTo } = useGoTo()
// @ts-ignore
import rawData from '@/assets/pca.json'
const form = reactive({
  name: '',
  gender: '',
  birthday: '',
  region: [],
});

const store = useUserStore()
const userInfo = computed(() => store.user);


function convertRegionsToJson(rawData) {  
  const options = [];  
    
  // 遍历省份  
  for (const province in rawData) {  
    const cityData = rawData[province];  
    const provinceOptions = {  
      value: province,  
      label: province,  
      children: [],  
    };  
  
    // 遍历城市/地区  
    for (const city in cityData) {  
      const districts = cityData[city];  
      if (Array.isArray(districts)) {  
        const cityOptions = {  
          value: `${city}`,  
          label: city,  
          children: districts.map(district => ({  
            value: `${district}`,  
            label: district,  
          })),  
        };  
        provinceOptions.children.push(cityOptions);  
      }  
    }  
  
    options.push(provinceOptions);  
  }  
  
  return options;  
}  

const regionOptions = ref(convertRegionsToJson(rawData));


async function onSubmit() {
  try {
    const response = await axios.put('/api/user/midifyData', {
      email: userInfo.value.email,
      username: form.name,
      sex: form.gender,
      birthday: form.birthday,
      district: form.region.join('-'),
    });

    console.log(response.data);

    if (response.data.code === '200') {
      ElMessage({
        message: '提交成功',
        type: 'success',
      })
    } else if (response.data.code === '-1') {
      ElMessage({
        message: response.data.msg,
        type: 'error',
      })
    }

  } catch (error) {
    // 处理错误，例如显示错误消息给用户    
    console.error(error);
    // 可以使用 alert 或其他 UI 库来显示错误消息  
  }
}

</script>

<style scoped>
.div1 {
  width: 650px;
  height: 70px;
  display: flex;
  justify-content: center;
  /* 水平居中 */
  align-items: center;
}
</style>